<template>
  <div class="billboard">
    <div id="cesiumContainer"></div>

    <d-dialog :title="title" :visible.sync="visible" width="500px" @closed="closedHandle">
      <template slot="default">
        454545
      </template>
      <template slot="footer">
        <d-button @click="visible = false">取 消</d-button>
        <d-button type="primary" @click="visible = false">确 定</d-button>
      </template>
    </d-dialog>
  </div>
</template>
<script>
// 加载 Cesium
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
var viewer // 视图
export default {
  data() {
    return {
      title: '提示信息',
      visible: false
    }
  },
  mounted() {
    this.initHandle()
  },
  methods: {
    /* *********************初始化 start********************* */
    initHandle() {
      const that = this
      var viewerOption = {
        geocoder: false, // 地理位置查询定位控件
        homeButton: false, // 默认相机位置控件
        timeline: false, // 时间滚动条控件
        navigationHelpButton: false, // 默认的相机控制提示控件
        fullscreenButton: false, // 全屏控件
        scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
        baseLayerPicker: false, // 底图切换控件
        animation: false, // 控制场景动画的播放速度控件
        vrButton: false
      }
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjA2ZDQ2ZS02NTA4LTQ2NTItODE1My1kZjE3MjBkMjFkNzAiLCJpZCI6NDM5NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MDcyNzI4Nn0.L7P8pJponZfYjdsGnEw2hIHd2AN0h-SuYl6XvzOwLeA'
      viewer = new Cesium.Viewer('cesiumContainer', viewerOption)

      // 加载底图
      viewer.imageryLayers.addImageryProvider(
        new Cesium.SingleTileImageryProvider({
          url: require('../../../images/worldimage.jpg')
        })
      )

      // 隐藏 LOGO 版权
      viewer._cesiumWidget._creditContainer.style.display = 'none'

      // 去掉entity的点击事件 start
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
      // 去掉entity的点击事件 end

      // 添加广告牌
      var monitorEntity = viewer.entities.add({
        name: 'video',
        position: Cesium.Cartesian3.fromDegrees(109.44, 32.11, 30.0),
        point: { // 点
          pixelSize: 0,
          HeightReference: 1000
        },
        label: { // 文字标签
          text: '文字标签',
          font: '500 30px Helvetica', // 15pt monospace
          scale: 0.5,
          style: Cesium.LabelStyle.FILL,
          fillColor: Cesium.Color.WHITE,
          pixelOffset: new Cesium.Cartesian2(-8, -35), // 偏移量
          showBackground: true,
          backgroundColor: new Cesium.Color(0.5, 0.6, 1, 1.0)
        },
        billboard: { // 图标
          image: require('../../../images/blueCamera.png'),
          width: 50,
          height: 50
        }
      })
      // 视角定位
      viewer.flyTo(monitorEntity, {
        duration: 2,
        offset: {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-30),
          range: 720
        }
      })
      viewer.scene.postProcessStages.fxaa.enabled = false// 去锯齿 使文字清晰
      // 点击广告牌改变文本和图标
      var handlerVideo = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
      handlerVideo.setInputAction(function (click) {
        var pick = viewer.scene.pick(click.position)
        if (pick && pick.id._name === 'video') {
          monitorEntity._billboard._image._value = require('../../../images/marker02.png')
          monitorEntity._label._text._value = 'label'
          that.handleModal()
        } else {
          // alert(1)
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    },
    // 弹出
    handleModal() {
      this.visible = true
    },
    // 取消
    closedHandle() {
      this.visible = false
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
